import React,{ useEffect, useState} from 'react'
import axios from 'axios'
import _ from 'lodash'
import { PageHeader, Card, Col, Row, List } from 'antd'
const News = () => {
  const [touristList, settouristList] = useState([])
  useEffect(() => {
    axios.get('/news?publishState=2&_expand=category').then(res => {
      // let obj = (_.groupBy(res.data, item => item.category.title))
      // let arr = []
      // for (let key in obj) {
      //   arr.push({
      //     label: key,
      //     value: obj[key]
      //   })
      // }
      // settourist(Object.entries(_.groupBy(res.data, item => item.category.title))) 
      // console.log(_.groupBy(res.data, item => item.category.title))
      settouristList(Object.entries(_.groupBy(res.data, item => item.category.title)))
    })
  }, [])
  return (
    <div style={{width: "95%",margin: '0 auto'}}>
      <PageHeader
        className="site-page-header"
        title="全球大新闻"
        subTitle="查看新闻"
      />
      <div className="site-card-wrapper">
        <Row gutter={[16, 16]}>
          {
            touristList.map(item => 
              <Col span={8} key={item[0]}>
                <Card title={item[0]} bordered={true} hoverable={true}>
                  <List
                   pagination={{
                    pageSize: 3
                  }}
                    size="large"
                    dataSource={item[1]}
                    renderItem={data =>
                      <List.Item>
                        <a href={`#/details/${data.id}`}>{data.title}</a>
                      </List.Item>}
                  />
                </Card>
              </Col>
            )
          }
        </Row>
      </div>
    </div>
  );
}

export default News;
